<template>
    <div>
         <!-- {{msg}} -->
        <div class="search-bar">       
        <van-row>
            <van-col span='3'>
                <img :src="locationIcon" class="icon" alt="">
            </van-col>
            <van-col span='16'>
                <input type="text" class="search-input">
            </van-col>
            <van-col span='5'>
                <van-button size="mini">查找</van-button>
            </van-col>
        </van-row>
        </div>
        <!-- swiper -->
        <div class="swiper-area">
            <van-swipe :autoplay="1000">
                <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
                    <img :src="banner.imageUrl" v-lazy="banner.imageUrl" width="100%" alt="" class="swipe-img"/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- type-bar -->
        <div class="type-bar">
            <div v-for="(cate,index) in category" :key="index">
                <img v-lazy="cate.image" width="90%" alt="">
                <span>{{cate.mallCategoryName}}</span>
            </div>
        </div>
        <!--AD banner area-->
        <div class="ad-banner">
            <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
        </div>
        <!--Recommend goods area-->
        <div class="recommend-area">
            <div class="recommend-title">
                商品推荐
            </div>
            <div class="recommend-body">
                <!-- swiper -->
                <swiper :options="swiperOption">
                    <swiper-slide v-for="(item, index) in recommendGoods" :key="index">
                        <div class="recommend-item">
                            <img :src="item.image" alt="" width="80%">
                            <div>{{item.goodsName}}</div>
                            <div>￥{{item.price | moneyFilter}}(￥{{item.mallPrice | moneyFilter}})</div>
                        </div>                        
                    </swiper-slide>
                     <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
            </div>
        </div>
        <!-- floor one area -->
      <floor-component :floorData='floor1' :floorTitle='floorName.floor1'></floor-component>
      <floor-component :floorData='floor2' :floorTitle='floorName.floor2'></floor-component>
      <floor-component :floorData='floor3' :floorTitle='floorName.floor3'></floor-component>
    <!-- hot area -->
    <div class="hot-area">
        <div class="hot-title">热卖商品</div>
        <div class="hot-goods">
            <van-list>
                <van-row gutter="20">
                    <van-col span='12' v-for=" (item,index) in hotGoods" :key="index">
                       <hot-goods :goodsImage= 'item.image' :goodsPrice= 'item.price' :goodsName = 'item.name'></hot-goods>
                    </van-col>
                </van-row>
            </van-list>
        </div>
    </div>
    </div>
</template>

<script>
import axios from 'axios';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import floorComponent from '../component/floorComponent';
import hotGoods from '../component/hotGoods'
import {toMoney} from '@/filter/moneyFilter';
    export default {
        
        components: {
            Swiper,
            SwiperSlide,
            floorComponent,
            hotGoods
        },
        data (){
            return{
                msg:'Shopping Mall',
                locationIcon: require('../../assets/images/icon_loacation.png'),
                 bannerPicArray:[
                {imageUrl:'https://trademark-pics-search.oss-cn-shanghai.aliyuncs.com/big/h4534361758057472.jpg'},
                {imageUrl:'https://trademark-pics-search.oss-cn-shanghai.aliyuncs.com/big/h4534361789580288.jpg'},
                {imageUrl:'https://trademark-pics-search.oss-cn-shanghai.aliyuncs.com/big/h4534361932694528.jpg'},
                ],
                category:[],
                adBanner:'',
                recommendGoods:[],
                swiperOption:{
                    // pagination:{
                    //     el:'.swiper-pagination'
                    // },
                    //direction:'vertical',                 
                    loop:true,
                    slidesPerView: 3,//一行显示3个                  
                },
                floor1:[],
                floor2:[],
                floor3:[],
                floorName:{},
                hotGoods:[],//热卖商品
            }
        },
        mounted () {
               //得到手机屏幕的宽度
        let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        //得到html的Dom元素
        let htmlDom = document.getElementsByTagName('html')[0];
        //设置根元素字体大小
        htmlDom.style.fontSize = htmlWidth / 20 + 'px';
        if(htmlWidth>750){
            htmlWidth = 750
        }
        },
        filters: {
          moneyFilter(money){
              return toMoney(money)
          }  
        },
        created () {
            
            
             axios.get('http://www.mocky.io/v2/5ebdee993100008400c5cf3c')
         //axios.get(' https://www.easy-mock.com/mock/5ebb6c1ca2293e5119c96abc/SimleVue/index')
            .then(response=>{
                    console.log(response);
                    if(response.status==200){      
                        const floorData=response.data.data;              
                        this.category = floorData.category; //获得类目
                       this.adBanner = floorData.advertesPicture;//获得广告图片
                       this.recommendGoods =floorData.recommend;//推荐商品
                       this.floor1 = floorData.floor1;     //楼层1数据
                       this.floor2 = floorData.floor2;     //楼层2数据
                       this.floor3 = floorData.floor3;     //楼层3数据
                       this.floorName = floorData.floorName; //楼层名称
                       this.hotGoods = floorData.hotGoods;
                    }
                }
            ).catch((error)=>{
                console.log(error)
            })
        }
    }
</script>

<style  scoped>
    .search-bar{
        height: 2.2rem;
        background-color: #041040;
        line-height: 2.2rem;
       
        overflow: hidden;
        clear: both;
    }
     .icon{
           height: 1.5rem;
           margin-top:.35rem;
        }
    .search-input{
      width:100%;
      height: 1.3rem;
      border-top:0px;
      border-left:0px;
      border-right:0px;
      border-bottom: 1px solid 1px !important ;
      background-color: #041040;
      color:#fff;
  }

  .swiper-area{
      width: 100%;
      clear: both;
     
  }
     .swipe-img{
          width:100%;
          height:10.2rem;
      }

    .type-bar{
        background-color: #fff;
        margin:0 .3rem .3rem .3rem;
        border-radius: .3rem;
        font-size: 14px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

   .type-bar div{
            padding:.3rem;
            font-size: 12px;
            text-align: center;
        }

     .recommend-area{
        background-color: #fff;
        margin-top: .3rem;
    }
    .recommend-title{
        border-bottom:1px solid #eee;
        font-size:14px;
        font-weight: bold;
        padding:.2rem;
        color:#041040;
        text-align: left;
    }
      .recommend-body{
       border-bottom: 1px solid #eee;
       display: flex;
   }

  .recommend-item{
      width:99%;
      border-right: 1px solid #eee;
      font-size: 12px;
      text-align: center;
  }

.hot-area{
      text-align: center;
      font-size:14px;
      height: 1.8rem;
      line-height:1.8rem;
  }
  .hot-goods{
    height: 130rem;
    overflow: hidden;
    background-color: #fff;

}

</style>

